<!--

    Copyright (C) 2015 The Gravitee team (http://gravitee.io)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<form name="$ctrl.formSettings" class="gv-forms" layout="column" ng-submit="$ctrl.save()">
  <h1>Settings</h1>
  <blockquote>
    <p style="font-size: 12px">
      <ng-md-icon icon="info" style="fill: grey"></ng-md-icon>
      Depending on your architecture, this configuration may be overridden by a local configuration file. See documentation for more
      information.
    </p>
  </blockquote>
  <div class="gv-form">
    <h2>Company</h2>
    <div class="gv-form-content" layout="column">
      <md-input-container class="md-block" flex-gt-xs>
        <label>Company name</label>
        <input ng-model="$ctrl.settings.company.name" ng-disabled="$ctrl.isReadonlySetting('company.name')" />
        <md-tooltip ng-if="$ctrl.isReadonlySetting('company.name')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
      </md-input-container>
    </div>
  </div>

  <div class="gv-form">
    <h2>Console</h2>
    <div class="gv-form-content" layout="column">
      <h3>Security plans type available</h3>
      <md-input-container class="gv-input-container-dense">
        <md-checkbox
          ng-model="$ctrl.settings.plan.security.keyless.enabled"
          aria-label="keyless"
          ng-disabled="$ctrl.isReadonlySetting('plan.security.keyless.enabled')"
        >
          Keyless plans
          <md-tooltip ng-if="$ctrl.isReadonlySetting('plan.security.keyless.enabled')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
        </md-checkbox>
      </md-input-container>
      <md-input-container class="gv-input-container-dense">
        <md-checkbox
          ng-model="$ctrl.settings.plan.security.apikey.enabled"
          ng-change="$ctrl.settings.plan.security.customApiKey.enabled = $ctrl.settings.plan.security.apikey.enabled ? $ctrl.settings.plan.security.customApiKey.enabled : false"
          aria-label="apikey"
          ng-disabled="$ctrl.isReadonlySetting('plan.security.apikey.enabled')"
        >
          Api-key plans
          <md-tooltip ng-if="$ctrl.isReadonlySetting('plan.security.apikey.enabled')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
        </md-checkbox>
      </md-input-container>
      <md-input-container class="gv-input-container-dense portal-component__sub-input">
        <md-checkbox
          ng-disabled="!$ctrl.settings.plan.security.apikey.enabled || $ctrl.isReadonlySetting('plan.security.apikey.allowCustom.enabled')"
          ng-model="$ctrl.settings.plan.security.customApiKey.enabled"
          aria-label="apikeyCustom"
        >
          Allow custom Api-key
          <md-tooltip ng-if="$ctrl.isReadonlySetting('plan.security.apikey.allowCustom.enabled')"
            >{{$ctrl.providedConfigurationMessage}}</md-tooltip
          >
        </md-checkbox>
      </md-input-container>
      <md-input-container class="gv-input-container-dense">
        <md-checkbox
          ng-model="$ctrl.settings.plan.security.oauth2.enabled"
          aria-label="oauth2"
          ng-disabled="$ctrl.isReadonlySetting('plan.security.oauth2.enabled')"
        >
          Oauth2 plans
          <md-tooltip ng-if="$ctrl.isReadonlySetting('plan.security.oauth2.enabled')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
        </md-checkbox>
      </md-input-container>
      <md-input-container class="gv-input-container-dense">
        <md-checkbox
          ng-model="$ctrl.settings.plan.security.jwt.enabled"
          aria-label="jwt"
          ng-disabled="$ctrl.isReadonlySetting('plan.security.jwt.enabled')"
        >
          JWT plans
          <md-tooltip ng-if="$ctrl.isReadonlySetting('plan.security.jwt.enabled')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
        </md-checkbox>
      </md-input-container>

      <h3>API labels dictionary</h3>
      <md-input-container class="md-block">
        <label>Labels <small>(Used by API Management to suggest labels for API's details)</small></label>
        <md-chips
          ng-model="$ctrl.settings.api.labelsDictionary"
          placeholder="Enter a label"
          md-add-on-blur="true"
          readonly="$ctrl.isReadonlySetting('api.labelsDictionary')"
          ng-click="$ctrl.formSettings.$setDirty()"
        >
        </md-chips>
        <md-tooltip ng-if="$ctrl.isReadonlySetting('api.labelsDictionary')">Configuration provided by the system</md-tooltip>
      </md-input-container>

      <h3>Dashboard</h3>
      <md-input-container class="gv-input-container-dense">
        <md-checkbox
          ng-model="$ctrl.settings.dashboards.apiStatus.enabled"
          aria-label="Display API status panel"
          ng-disabled="$ctrl.isReadonlySetting('console.dashboards.apiStatus.enabled')"
        >
          Display API STATUS panel
          <md-tooltip ng-if="$ctrl.isReadonlySetting('console.dashboards.apiStatus.enabled')"
            >Configuration provided by the system</md-tooltip
          >
        </md-checkbox>
      </md-input-container>

      <h3>API Primary Owner mode</h3>
      <md-input-container class="md-block">
        <md-radio-group ng-model="$ctrl.settings.api.primaryOwnerMode">
          <md-radio-button ng-value="'HYBRID'" aria-label="Hybrid"
            >HYBRID: an API primary owner can be either a user or a group (Default)</md-radio-button
          >
          <md-radio-button ng-value="'USER'" aria-label="User">USER: an API primary owner can only be a user</md-radio-button>
          <md-radio-button ng-value="'GROUP'" aria-label="Group">GROUP: an API primary owner can only be a group</md-radio-button>
        </md-radio-group>
        <md-tooltip ng-if="$ctrl.isReadonlySetting('api.primaryOwnerMode')">Configuration provided by the system</md-tooltip>
      </md-input-container>
    </div>
  </div>

  <div class="gv-form">
    <h2>Portal</h2>
    <div class="gv-form-content" layout="column">
      <h3>General</h3>
      <div class="gv-form-content" layout="column">
        <md-input-container class="md-block" flex-gt-xs>
          <label
            >Api-key Header
            <small>(Used by portal to display the CURL command, change the YAML configuration to impact the gateway)</small>
          </label>
          <input ng-model="$ctrl.settings.portal.apikeyHeader" ng-disabled="$ctrl.isReadonlySetting('portal.apikey.header')" />
          <md-tooltip ng-if="$ctrl.isReadonlySetting('portal.apikey.header')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
        </md-input-container>
        <md-input-container class="md-block" flex-gt-xs>
          <label>Portal URL</label>
          <input type="text" ng-model="$ctrl.settings.portal.url" ng-disabled="$ctrl.isReadonlySetting('portal.url')" />
          <md-tooltip ng-if="$ctrl.isReadonlySetting('portal.url')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
        </md-input-container>

        <md-switch
          aria-label="Override homepage title"
          ng-disabled="$ctrl.isReadonlySetting('portal.homepageTitle')"
          ng-model="$ctrl.overrideHomepageTitle"
          ng-change="$ctrl.toggleOverrideHomepageTitle()"
        >
          Override homepage title
          <md-tooltip ng-if="$ctrl.isReadonlySetting('portal.homepageTitle')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
        </md-switch>
        <md-input-container class="md-block" flex-gt-xs ng-if="$ctrl.overrideHomepageTitle">
          <label>Portal homepage title</label>
          <input type="text" ng-model="$ctrl.settings.portal.homepageTitle" ng-disabled="$ctrl.isReadonlySetting('portal.homepageTitle')" />
          <md-tooltip ng-if="$ctrl.isReadonlySetting('portal.homepageTitle')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
        </md-input-container>
      </div>

      <h3>Options</h3>
      <div class="gv-form-content" layout="column">
        <md-input-container class="gv-input-container-dense">
          <md-checkbox
            ng-model="$ctrl.settings.portal.apis.tilesMode.enabled"
            aria-label="Tiles Mode"
            ng-disabled="$ctrl.isReadonlySetting('portal.apis.tilesMode.enabled')"
          >
            Use Tiles Mode for apis by default (if not overridden by user)
            <md-tooltip ng-if="$ctrl.isReadonlySetting('portal.apis.tilesMode.enabled')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
          </md-checkbox>
        </md-input-container>
        <md-input-container class="gv-input-container-dense">
          <md-checkbox
            ng-model="$ctrl.settings.portal.support.enabled"
            aria-label="Support"
            ng-disabled="$ctrl.isReadonlySetting('portal.support.enabled')"
          >
            Activate Support
            <md-tooltip ng-if="$ctrl.isReadonlySetting('portal.support.enabled')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
          </md-checkbox>
        </md-input-container>
        <md-input-container class="gv-input-container-dense">
          <md-checkbox
            ng-model="$ctrl.settings.portal.rating.enabled"
            aria-label="Rating"
            ng-disabled="$ctrl.isReadonlySetting('portal.rating.enabled')"
          >
            Activate Rating
            <md-tooltip ng-if="$ctrl.isReadonlySetting('portal.rating.enabled')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
          </md-checkbox>
        </md-input-container>
        <md-input-container class="gv-input-container-dense">
          <md-checkbox
            ng-model="$ctrl.settings.portal.rating.comment.mandatory"
            ng-disabled="$ctrl.isReadonlySetting('portal.rating.comment.mandatory')"
            aria-label="Rating comment mandatory"
          >
            Force user to fill comment before to save a rating
            <md-tooltip ng-if="$ctrl.isReadonlySetting('portal.rating.comment.mandatory')"
              >{{$ctrl.providedConfigurationMessage}}</md-tooltip
            >
          </md-checkbox>
        </md-input-container>
        <md-input-container class="gv-input-container-dense">
          <md-checkbox
            ng-model="$ctrl.settings.portal.userCreation.enabled"
            aria-label="Allow user creation"
            ng-disabled="$ctrl.isReadonlySetting('portal.userCreation.enabled')"
          >
            Allow User Registration
            <md-tooltip ng-if="$ctrl.isReadonlySetting('portal.userCreation.enabled')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
          </md-checkbox>
        </md-input-container>
        <md-input-container class="gv-input-container-dense portal-component__sub-input">
          <md-checkbox
            ng-model="$ctrl.settings.portal.userCreation.automaticValidation.enabled"
            ng-disabled="!$ctrl.settings.portal.userCreation.enabled || $ctrl.isReadonlySetting('portal.userCreation.automaticValidation.enabled')"
            aria-label="Enable auto validation of creation"
          >
            Enable automatic validation of registration requests.
            <md-tooltip ng-if="$ctrl.isReadonlySetting('portal.userCreation.automaticValidation.enabled')"
              >{{$ctrl.providedConfigurationMessage}}</md-tooltip
            >
          </md-checkbox>
        </md-input-container>
        <md-input-container class="gv-input-container-dense">
          <md-checkbox
            ng-model="$ctrl.settings.portal.analytics.enabled"
            aria-label="Add Google Analytics"
            ng-disabled="$ctrl.isReadonlySetting('portal.analytics.enabled')"
          >
            Add Google Analytics
            <md-tooltip ng-if="$ctrl.isReadonlySetting('portal.analytics.enabled')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
          </md-checkbox>
        </md-input-container>
        <md-input-container class="md-block" flex-gt-xs>
          <label>Google Analytics TrackingId</label>
          <input
            ng-model="$ctrl.settings.portal.analytics.trackingId"
            ng-disabled="$ctrl.isReadonlySetting('portal.analytics.trackingId')"
          />
          <md-tooltip ng-if="$ctrl.isReadonlySetting('portal.analytics.trackingId')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
        </md-input-container>
        <md-input-container class="gv-input-container-dense">
          <md-checkbox
            ng-model="$ctrl.settings.portal.uploadMedia.enabled"
            ng-disabled="$ctrl.isReadonlySetting('portal.uploadMedia.enabled')"
            aria-label="Allow upload media"
          >
            Allow Upload Images
            <md-tooltip ng-if="$ctrl.isReadonlySetting('portal.uploadMedia.enabled')">Configuration provided by the system</md-tooltip>
          </md-checkbox>
        </md-input-container>
        <md-input-container class="md-block" flex-gt-xs>
          <label>Max size upload file (bytes)</label>
          <input
            type="number"
            min="0"
            ng-model="$ctrl.settings.portal.uploadMedia.maxSizeInOctet"
            ng-disabled="$ctrl.isReadonlySetting('portal.uploadMedia.maxSizeInOctet')"
          />
          <md-tooltip ng-if="$ctrl.isReadonlySetting('portal.uploadMedia.maxSizeInOctet')"
            >{{$ctrl.providedConfigurationMessage}}</md-tooltip
          >
        </md-input-container>
      </div>

      <h3>OpenAPI viewers</h3>
      <div class="gv-form-content" layout="column">
        <table md-table class="gv-table-dense" style="width: auto">
          <tr>
            <td>
              <md-switch
                ng-model="$ctrl.settings.openAPIDocViewer.openAPIDocType.swagger.enabled"
                aria-label="swagger"
                ng-disabled="!$ctrl.settings.openAPIDocViewer.openAPIDocType.redoc.enabled || $ctrl.isReadonlySetting('open.api.doc.type.swagger.enabled')"
                ng-change="$ctrl.toggleDocType()"
              >
                Swagger-UI
                <md-tooltip ng-if="$ctrl.isReadonlySetting('open.api.doc.type.swagger.enabled')"
                  >{{$ctrl.providedConfigurationMessage}}</md-tooltip
                >
              </md-switch>
            </td>
            <td>
              <md-radio-group ng-model="$ctrl.settings.openAPIDocViewer.openAPIDocType.defaultType">
                <md-radio-button
                  value="Swagger"
                  class="md-primary"
                  ng-disabled="!$ctrl.settings.openAPIDocViewer.openAPIDocType.swagger.enabled || $ctrl.isReadonlySetting('open.api.doc.type.default')"
                  style="margin-bottom: 0px"
                  >Set as default
                </md-radio-button>
                <md-tooltip ng-if="$ctrl.isReadonlySetting('open.api.doc.type.default')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
              </md-radio-group>
            </td>
          </tr>
          <tr>
            <td>
              <md-switch
                ng-model="$ctrl.settings.openAPIDocViewer.openAPIDocType.redoc.enabled"
                aria-label="swagger"
                ng-disabled="!$ctrl.settings.openAPIDocViewer.openAPIDocType.swagger.enabled || $ctrl.isReadonlySetting('open.api.doc.type.redoc.enabled')"
                ng-change="$ctrl.toggleDocType()"
              >
                Redoc
                <md-tooltip ng-if="$ctrl.isReadonlySetting('open.api.doc.type.redoc.enabled')"
                  >{{$ctrl.providedConfigurationMessage}}</md-tooltip
                >
              </md-switch>
            </td>
            <td>
              <md-radio-group ng-model="$ctrl.settings.openAPIDocViewer.openAPIDocType.defaultType">
                <md-radio-button
                  value="Redoc"
                  class="md-primary"
                  ng-disabled="!$ctrl.settings.openAPIDocViewer.openAPIDocType.redoc.enabled  || $ctrl.isReadonlySetting('open.api.doc.type.default')"
                  style="margin-bottom: 0px"
                  >Set as default
                </md-radio-button>
                <md-tooltip ng-if="$ctrl.isReadonlySetting('open.api.doc.type.default')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
              </md-radio-group>
            </td>
          </tr>
        </table>
      </div>

      <h3>Schedulers</h3>
      <div class="gv-form-content" layout="column">
        <md-input-container class="md-block" flex-gt-xs>
          <label>Tasks (in seconds)</label>
          <input
            type="number"
            min="0"
            ng-model="$ctrl.settings.scheduler.tasks"
            ng-disabled="$ctrl.isReadonlySetting('portal.scheduler.tasks')"
          />
          <md-tooltip ng-if="$ctrl.isReadonlySetting('portal.scheduler.tasks')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
        </md-input-container>
        <md-input-container class="md-block" flex-gt-xs>
          <label>Notifications (in seconds)</label>
          <input
            type="number"
            min="0"
            ng-model="$ctrl.settings.scheduler.notifications"
            ng-disabled="$ctrl.isReadonlySetting('portal.scheduler.notifications')"
          />
          <md-tooltip ng-if="$ctrl.isReadonlySetting('portal.scheduler.notifications')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
        </md-input-container>
      </div>

      <h3>Documentation</h3>
      <div class="gv-form-content" layout="column">
        <md-input-container class="md-block" flex-gt-xs>
          <label>Documentation URL</label>
          <input ng-model="$ctrl.settings.documentation.url" ng-disabled="$ctrl.isReadonlySetting('documentation.url')" />
          <md-tooltip ng-if="$ctrl.isReadonlySetting('documentation.url')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
        </md-input-container>
      </div>
    </div>
  </div>

  <div class="gv-form">
    <h2>CORS</h2>
    <div class="gv-form-content" layout="column">
      <md-input-container class="md-block">
        <label>Allow-Origin</label>
        <md-chips
          ng-model="$ctrl.settings.cors.allowOrigin"
          placeholder="*, https://mydomain.com, (http|https).*.mydomain.com, ..."
          md-on-add="$ctrl.controlAllowOrigin($chip, $index)"
          md-add-on-blur="true"
          readonly="$ctrl.isReadonlySetting('http.api.portal.cors.allow-origin')"
        >
          <md-chip-template>
            <strong>{{$chip}}</strong>
          </md-chip-template>
        </md-chips>
        <div class="hint">
          The origin parameter specifies a URI that may access the resource. Scheme, domain and port are part of the
          <i>same-origin</i> definition.<br />
          If you choose to enable '*' it means that is allows all requests, regardless of origin. Regular Expressions are also supported.
        </div>
        <div ng-if="!$ctrl.isRegexValid()" style="color: red">Regex is invalid</div>
        <md-tooltip ng-if="$ctrl.isReadonlySetting('http.api.portal.cors.allow-origin')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
      </md-input-container>
      <md-input-container class="md-block" flex-gt-sm>
        <label>Access-Control-Allow-Methods</label>
        <md-select
          ng-model="$ctrl.settings.cors.allowMethods"
          md-on-close="clearSearchTerm()"
          data-md-container-class="selectdemoSelectHeader"
          multiple
          ng-disabled="$ctrl.isReadonlySetting('http.api.portal.cors.allow-methods')"
        >
          <md-select-header class="demo-select-header">
            <input
              ng-model="searchTerm"
              type="search"
              placeholder="Search for allowed HTTP method."
              class="demo-header-searchbox md-text"
            />
          </md-select-header>
          <md-optgroup label="HTTPMethods">
            <md-option
              ng-value="method"
              ng-repeat="method in $ctrl.methods |
              filter:searchTerm"
              >{{method}}
            </md-option>
          </md-optgroup>
        </md-select>
        <div class="hint">
          Specifies the method or methods allowed when accessing the resource. This is used in response to a preflight request.
        </div>
        <md-tooltip ng-if="$ctrl.isReadonlySetting('http.api.portal.cors.allow-methods')"
          >{{$ctrl.providedConfigurationMessage}}</md-tooltip
        >
      </md-input-container>
      <md-input-container class="md-block">
        <label>Allow-Headers</label>
        <md-chips
          ng-model="$ctrl.settings.cors.allowHeaders"
          md-autocomplete-snap
          md-add-on-blur="true"
          md-require-match="false"
          readonly="$ctrl.isReadonlySetting('http.api.portal.cors.allow-headers')"
        >
          <md-autocomplete
            md-search-text="searchHeaders"
            md-items="item in $ctrl.querySearchHeaders(searchHeaders)"
            md-item-text="item"
            placeholder="Content-Type, ..."
          >
            <span md-highlight-text="searchHeaders">{{item}}</span>
          </md-autocomplete>
          <md-chip-template>
            <span>
              <strong>{{$chip}}</strong>
            </span>
          </md-chip-template>
          <span class="ipsum">
            Used in response to a preflight request to indicate which HTTP headers can be used when making the actual request.
          </span>
        </md-chips>
        <md-tooltip ng-if="$ctrl.isReadonlySetting('http.api.portal.cors.allow-headers')"
          >{{$ctrl.providedConfigurationMessage}}</md-tooltip
        >
      </md-input-container>
      <md-input-container class="md-block">
        <label>Exposed-Headers</label>
        <md-chips
          ng-model="$ctrl.settings.cors.exposedHeaders"
          md-autocomplete-snap
          md-add-on-blur="true"
          md-require-match="false"
          readonly="$ctrl.isReadonlySetting('http.api.portal.cors.exposed-headers')"
        >
          <md-autocomplete
            md-search-text="searchHeaders"
            md-items="item in $ctrl.querySearchHeaders(searchHeaders)"
            md-item-text="item"
            placeholder="Content-Type, ..."
          >
            <span md-highlight-text="searchHeaders">{{item}}</span>
          </md-autocomplete>
          <md-chip-template>
            <span>
              <strong>{{$chip}}</strong>
            </span>
          </md-chip-template>
          <span class="ipsum">
            Used in response to a preflight request to indicate which HTTP headers can be used when making the actual request.
          </span>
        </md-chips>
        <md-tooltip ng-if="$ctrl.isReadonlySetting('http.api.portal.cors.exposed-headers')"
          >{{$ctrl.providedConfigurationMessage}}</md-tooltip
        >
      </md-input-container>
      <md-input-container class="md-block" flex-gt-xs>
        <label>Max age (seconds) <small>How long the response from a pre-flight request can be cached by clients</small></label>
        <input
          type="number"
          min="0"
          ng-model="$ctrl.settings.cors.maxAge"
          ng-disabled="$ctrl.isReadonlySetting('http.api.portal.cors.max-age')"
        />
        <md-tooltip ng-if="$ctrl.isReadonlySetting('http.api.portal.cors.max-age')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
      </md-input-container>
    </div>
  </div>

  <div class="gv-form">
    <h2>SMTP</h2>
    <div class="gv-form-content" layout="column">
      <md-input-container class="gv-input-container-dense">
        <md-checkbox
          ng-model="$ctrl.settings.email.enabled"
          aria-label="Email enabled"
          ng-disabled="$ctrl.isReadonlySetting('email.enabled')"
        >
          Enable Emailing
          <md-tooltip ng-if="$ctrl.isReadonlySetting('email.enabled')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
        </md-checkbox>
      </md-input-container>
      <md-input-container class="md-block" flex-gt-xs>
        <label>Host</label>
        <input
          type="text"
          ng-model="$ctrl.settings.email.host"
          ng-disabled="!$ctrl.settings.email.enabled || $ctrl.isReadonlySetting('email.host')"
        />
        <md-tooltip ng-if="$ctrl.isReadonlySetting('email.host')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
      </md-input-container>
      <md-input-container class="md-block" flex-gt-xs>
        <label>Port</label>
        <input
          type="number"
          min="0"
          ng-model="$ctrl.settings.email.port"
          ng-disabled="!$ctrl.settings.email.enabled || $ctrl.isReadonlySetting('email.port')"
        />
        <md-tooltip ng-if="$ctrl.isReadonlySetting('email.port')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
      </md-input-container>
      <md-input-container class="md-block" flex-gt-xs>
        <label>Username</label>
        <input
          type="text"
          ng-model="$ctrl.settings.email.username"
          ng-disabled="!$ctrl.settings.email.enabled || $ctrl.isReadonlySetting('email.username')"
        />
        <md-tooltip ng-if="$ctrl.isReadonlySetting('email.username')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
      </md-input-container>
      <md-input-container class="md-block" flex-gt-xs>
        <label>Password</label>
        <input
          type="password"
          ng-model="$ctrl.settings.email.password"
          ng-disabled="!$ctrl.settings.email.enabled || $ctrl.isReadonlySetting('email.password')"
        />
        <md-tooltip ng-if="$ctrl.isReadonlySetting('email.password')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
      </md-input-container>
      <md-input-container class="md-block" flex-gt-xs>
        <label>Protocol</label>
        <input
          type="text"
          ng-model="$ctrl.settings.email.protocol"
          ng-disabled="!$ctrl.settings.email.enabled || $ctrl.isReadonlySetting('email.protocol')"
        />
        <md-tooltip ng-if="$ctrl.isReadonlySetting('email.protocol')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
      </md-input-container>
      <md-input-container class="md-block" flex-gt-xs>
        <label>Subject</label>
        <input
          type="text"
          ng-model="$ctrl.settings.email.subject"
          ng-disabled="!$ctrl.settings.email.enabled || $ctrl.isReadonlySetting('email.subject')"
        />
        <md-tooltip ng-if="$ctrl.isReadonlySetting('email.subject')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
      </md-input-container>
      <md-input-container class="md-block" flex-gt-xs>
        <label>From</label>
        <input
          type="email"
          ng-model="$ctrl.settings.email.from"
          ng-disabled="!$ctrl.settings.email.enabled || $ctrl.isReadonlySetting('email.from')"
        />
        <md-tooltip ng-if="$ctrl.isReadonlySetting('email.from')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
      </md-input-container>

      <h3>Mail properties</h3>
      <md-input-container class="gv-input-container-dense">
        <md-checkbox
          ng-model="$ctrl.settings.email.properties.auth"
          aria-label="Alerting enabled"
          ng-disabled="!$ctrl.settings.email.enabled || $ctrl.isReadonlySetting('email.properties.auth')"
        >
          Enable Auth
          <md-tooltip ng-if="$ctrl.isReadonlySetting('email.properties.auth')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
        </md-checkbox>
      </md-input-container>
      <md-input-container class="gv-input-container-dense">
        <md-checkbox
          ng-model="$ctrl.settings.email.properties.startTlsEnable"
          aria-label="Alerting enabled"
          ng-disabled="!$ctrl.settings.email.enabled || $ctrl.isReadonlySetting('email.properties.starttls.enable')"
        >
          Enable Start TLS
          <md-tooltip ng-if="$ctrl.isReadonlySetting('email.properties.starttls.enable')"
            >{{$ctrl.providedConfigurationMessage}}</md-tooltip
          >
        </md-checkbox>
      </md-input-container>
      <md-input-container class="gv-input-container-dense">
        <label>SSL Trust</label>
        <input
          type="text"
          ng-model="$ctrl.settings.email.properties.sslTrust"
          ng-disabled="!$ctrl.settings.email.enabled || $ctrl.isReadonlySetting('email.properties.ssl.trust')"
        />
        <md-tooltip ng-if="$ctrl.isReadonlySetting('email.properties.ssl.trust')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
      </md-input-container>
    </div>
  </div>

  <md-card-actions>
    <md-button
      type="submit"
      class="md-raised md-primary"
      ng-disabled="$ctrl.formSettings.$invalid || $ctrl.formSettings.$pristine"
      permission
      permission-only="['environment-settings-c', 'environment-settings-u', 'environment-settings-d']"
      >Save
    </md-button>
    <md-button
      type="button"
      class="md-raised"
      ng-click="$ctrl.reset()"
      ng-disabled="$ctrl.formSettings.$invalid || $ctrl.formSettings.$pristine"
      permission
      permission-only="['environment-settings-c', 'environment-settings-u', 'environment-settings-d']"
      >Reset
    </md-button>
  </md-card-actions>
</form>
